<template>
  <div id="app-design" v-hotkey.prevent="keymap">
    <!-- 上侧工具栏 toolbar #proto-toolbar -->
    <tool-bar />
    <!-- end toolbar -->

    <!-- 主 - 画图区 -->
    <div id="proto-main-content">
      <div id="design" style="z-index:1;width:100%;height:100%;">
        <sand-box></sand-box>
      </div>

      <!-- 快速工具栏 .quick-toolbar -->
      <quick-toolbar class="no-user-select" />
      <!-- 页面管理及元素管理 -->
      <left-pane v-show="leftPane.visible" class="no-user-select" />
      <!-- end 页面管理及元素管理 -->

      <!-- 视图 - 参考线、链接上一页、画布滚动条、画布坐标系等 -->
      <proto-viewport />
      <!-- end 视图 -->

      <right-pane />
    </div>
    <!-- end 主 - 画图区 -->

    <!-- 底部 -->
    <!-- <div class="footer bottom-view-absolute" style="font-size:10px;">南京紫枫信息科技有限责任公司</div> -->
    <!-- 热盒 -->
    <a-modal
      class="quick-widget-snashots"
      v-model="hotBoxVisible"
      :destroyOnClose="true"
      :mask="false"
      :closable="false"
      :footer="null"
      :dialog-style="{ top: '15%' }"
      @ok="() => (hotBoxVisible = false)"
    >
      <div class="quick-keys" v-hotkey.prevent="hotBoxKeymap">
        <!-- 最多三十个 -->
        <div
          class="quick-widget-snapshot"
          v-for="i in 25"
          :key="i"
          :class="{ selected: i == 1 }"
        >
          <template v-if="i<11">
            <a-badge title="数字快捷键" :count="i == 10 ? '0' : i" show-zero>
              <div class="item">{{ i }}</div>
            </a-badge>
          </template>
          <template v-else>
            <div class="item">{{ i }}</div>
          </template>
        </div>
      </div>
    </a-modal>
    <!-- end 热盒 -->
  </div>
</template>
<script src="@/assets/app/design/_id.js" />

<style lang="less">
@import '@/assets/design.less';
</style>

<style lang="less">
.quick-widget-snashots {
  .ant-modal {
    width: auto !important;
    // (60vw+60px) + (11*5px) + (border-width:15px)
    max-width: calc(60vw + 60px + 55px + 15px);
    min-height: 12vw;
    padding: 0;
    .ant-modal-content {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 12vw;
      background-color: rgba(0, 0, 0, 0.65);
      border-radius: 3px;
      .ant-modal-body {
        padding: 5px;
        .quick-keys {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          .quick-widget-snapshot {
            width: calc(6vw + 6px);
            height: calc(6vw + 6px);
            margin: 3px;
            border: 0;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center;
            .item {
              background-color: white;
              width: 6vw;
              height: 6vw;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 2px;
            }
          }
          .quick-widget-snapshot:hover {
            border: 2px @widget-selected solid;
          }
          .quick-widget-snapshot.selected {
            border: 2px @widget-selected solid;
          }
        }
      }
    }
  }
}

.cube {
  display: inline-block;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  margin: 4px;
  background: #eee;
  --color: #4af;
}
</style>

<style lang="less" scoped>
@import '@/assets/app/design/_id.less';
</style>
